<template>
	<scroll-view scroll-y
	 style="height: 100vh;"
	 @scrolltolower="onScrollToLower">
	<view class="content">
		<view class="Narbar_bo"  :style="{ marginTop: heightConfig.navBarPaddingTop + 'px' }">
			<view @click="back"><u-icon name="arrow-left"></u-icon></view>
			<view class="title" size="19px">待预约</view>
			<view></view>
		</view>
		<view class="content-item" v-for="(item,index) in dataList" @click="toPage(item.id,item)">
			<view class="top">订单编号: {{item.orderNo}}</view>
			<view class="Photo-item">
				<view class="photo">
					<image :src="url+item.meal.imagePath.split(',')[0]" mode="" style="width:100%;height:100%;"></image>
				</view>
				<view class="txt">
					<view class="txt-top">
						{{item.meal.setMealName}}
					</view>
					<view class="txt-bottom">
						{{item.meal.packageDescription}}
					</view>
				</view>
			</view>
			<view class="bottom-item">
				<view class="bottom">
					预约时间：等待信息填写
				</view>
				<view class="info">信息填写</view>
			</view>
		</view>
		 <image  v-if="!dataList.length" src="../../static/images2/empty.png"  style=" position: absolute; left: 50%; transform: translateX(-50%); width: 400rpx; height: 400rpx;"></image>
	</view>
	</scroll-view>
</template>

<script>
	import {
		baseUrl
	} from "@/config.js"
	import order from "@/api/order";
	export default {
		data() {
			return {
				dataList: [],
				url: "",
				heightConfig: {},
				pageNum:1
			}
		},
		onShow() {
			//获取订单列表
			 console.log("dsaidj")
			this.url = baseUrl
			this.getOrderList()
		},
		onLoad() {
			// 监听返回事件
		let	_this = this
		  uni.getSystemInfo({
						  success(res){
							       _this.heightConfig.navBarPaddingTop = res.statusBarHeight // 单位：px
						  }
					 })
		},
		async onPullDownRefresh() {
					
			       await this.getOrderList()
				    uni.stopPullDownRefresh();
		},
		onBackPress(e) {
			// 判断返回事件的来源
			if (e.from === 'backbutton') {
				this.cancel();
				return true; // 阻止返回
			}
			console.log(e,"返回时间");
			uni.switchTab({
				url: "/pages/index/index"
			});
		},

		methods: {
			onScrollToLower(){
				this.pageNum++
				 this.getOrderList()
			},
			toPage(id, item) {
				console.log("跳转参数", item)
				uni.navigateTo({
					url: `/subPages/infoConfirm/infoConfirm?id=${id}&data=${item.orderNo}`,
				})
			},
			async getOrderList() {
				//0未付款 1已付款 2已完成 3已退款 4已预约 5已关闭 6完成中
				const res = await order.getOrderList({
					status: 1,
					pageNum:1
				}) 
			
				if(res.total<=this.dataList.length)return 
				this.dataList = [...this.dataList,...res.rows]
				console.log(res, "订单列表")
			},
			back(){
				 uni.switchTab({
				 		url: '/pages/mine/mine'
			    });
			}
		},
		
	}
</script>

<style scoped>
	.Narbar_bo {
		width: 100%;
		height: 35px;
		display: flex;
	
		padding: 0 28rpx;
		justify-content: space-between;
		align-items: center;
	
		
	}
	.title {
		font-size: 18px;
		font-weight: 600;
	}
	.content {
		padding: 36rpx;
	
	}

	.content-item {
		width: 686rpx;
		box-sizing: border-box;
		padding: 20rpx;
		height: 294rpx;
		background: #FFFFFF;
		border-radius: 16rpx 16rpx 16rpx 16rpx;
		margin-bottom: 20rpx;
	}

	.top {

		height: 34rpx;

		font-weight: 500;
		font-size: 24rpx;
		color: #333333;

	}

	.Photo-item {
		display: flex;
		margin-top: 10rpx;
	}

	.photo {
		width: 193rpx;
		height: 150rpx;
		background: #F6F6F6;
		border-radius: 12rpx 12rpx 12rpx 12rpx;
	}

	.txt {
		margin-left: 10rpx;
	}

	.txt-top {
		padding-top: 10rpx;
	}

	.txt-bottom {
		width: 334rpx;
		height: 68rpx;
		font-family: PingFang SC, PingFang SC;
		font-weight: 400;
		font-size: 24rpx;
		color: #626262;
		margin-top: 10rpx;
		text-align: left;
		font-style: normal;
		font-size: 24rpx;
		text-transform: none;
	}

	.info {
		margin-top: 20rpx;
		width: 112rpx;
		height: 50rpx;
		background: #FE7A3E;
		text-align: center;
		line-height: 50rpx;

		border-radius: 8rpx 8rpx 8rpx 8rpx;
		font-size: 24rpx;
	}

	.bottom {
		width: 352rpx;
		height: 42rpx;
		font-family: PingFang SC, PingFang SC;
		font-weight: 400;
		font-size: 24rpx;
		color: #159DFF;
		border: 1rpx solid #159DFF;
		text-align: left;
		font-style: normal;
		display: flex;
		align-items: center;
		justify-content: center;
		margin-top: 28rpx;
		text-transform: none;

	}

	.bottom-item {
		display: flex;
		color: white;
		justify-content: space-between;
	}
</style>